<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../../../plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../../css/normalize.css"/>
    <link rel="stylesheet" href="../../../css/fa.css"/>
    <link rel="stylesheet" href="../../../css/icon.css"/>
    <link rel="stylesheet" href="../../../css/ares_animate.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_hover_variant.min.css"/>
    <link rel="stylesheet" href="../../../css/ares_reboot.css"/>
    <link rel="stylesheet" href="../../../css/app.min.css"/>
    <link rel="stylesheet" href="../../../css/iframe.css"/>
    <style>
        .layui-form-checkbox, .layui-form-checkbox > span {
            width: 100%;
        }
    </style>
</head>

<body>
<form class="ares-p layui-form" lay-filter="form">
    <div class="layui-form-item">
        <label class="layui-form-label">处方类别</label>
        <div class="layui-input-block">
            <select id="treatment-group" name="treatmentGroup" lay-verify="required" lay-filter="treatmentGroup"></select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗项目</label>
        <div id="treatment-item-wrap" class="layui-input-block ares-row"></div>
    </div>
   <!-- <div class="layui-form-item">
        <label class="layui-form-label">治疗频次</label>
        <div class="layui-input-block">
            <input type="radio" name="frequency" value="1" lay-filter="frequency" title="qd(一日一次)" checked>
            <input type="radio" name="frequency" value="2" lay-filter="frequency" title="bid(一日二次)">
            <input type="radio" name="frequency" value="3" lay-filter="frequency" title="tid(一日三次)">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">治疗次数</label>
        <div class="layui-input-block">
            <input name="times" required value="1" lay-verify="required|number|min" min="1" lay-verify-label="治疗次数" placeholder="请输入治疗次数" class="layui-input">
        </div>
    </div>-->
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submit">提交表单</button>
        </div>
    </div>
</form>


<script type="text/javascript" src="../../../plugins/layui/layui.js"></script>
<script type="text/javascript" src="../../../aresExtends/config/layuiConfig.js"></script>
<script>
    layui.use(['form', 'comboServices', 'mandyServices', 'qs', '_', 'utils'], function (form, comboServices, mandyServices, qs, _, utils) {
        var queryParams = qs.parse(location.search.substr(1)),
            editAble = !!(queryParams.edit * 1),
            cacheData = utils.ARES.cache.trainingProgramType,
            treatmentGroups = [],
            currentTreatmentGroup = {};
        console.log(cacheData)
        init();

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 提交表单
         */
        form.on('submit(submit)', function (data) {
            var fields = data.field;
            filterCurrentTreatmentGroup(fields.treatmentGroup);
            var info = $.extend({}, fields, {groupInfo: currentTreatmentGroup});
            if (!isSelectedTrainingItem(fields)) {
                utils.msgError('请选择训练治疗项目');
                return false;
            }
            utils.ARES.event.emit('updateTrainingProgramType', info);
            utils.layer.closeAll('iframe');
            return false;
        });

        /**
         * @author: ares
         * @date: 2021/3/9 9:52
         * @description: 切换处方类别(治疗组)
         */
        form.on('select(treatmentGroup)', function (data) {
            getTrainingItem(data.value);
        });

        /**
         * @author: ares
         * @date: 2021/3/10 16:20
         * @description: 根据治疗组id获取组信息
         * @param{string}  groupId  治疗组id
         */
        function filterCurrentTreatmentGroup(groupId) {
            var filterGroup = _.filter(treatmentGroups, function (group) {
                return group.id == groupId;
            });
            if (filterGroup.length) {
                currentTreatmentGroup = filterGroup[0];
                return filterGroup[0];
            }
            return null;
        }

        /**
         * @author: ares
         * @date: 2021/3/10 15:27
         * @description: 获取处方类别列表
         */
        function getTreatmentGroup() {
            mandyServices.mandy_get_treatment_group().then(function (res) {
                var list = res.data.treat_groups,
                    $treatmentGroup = $('#treatment-group'),
                    $fragment = $(document.createDocumentFragment());
                treatmentGroups = list;
                $fragment.append('<option value="">请选择</option>')
                $.each(list, function (idx, tg) {
                    $fragment.append('<option value="' + tg.id + '">' + tg.prcp_item_type.name + '</option>')
                });
                $treatmentGroup.empty().append($fragment);
                if (editAble && $.isPlainObject(cacheData)) {
                    form.val('form', {
                        treatmentGroup: cacheData.treatmentGroup
                    });
                    getTrainingItem(cacheData.treatmentGroup);
                }
                form.val('form', {
                    treatmentGroup: list[0].id
                });
                form.render('select');
                getTrainingItem(list[0].id);
            });
        }

        /**
         * @author: ares
         * @date: 2021/3/10 16:21
         * @description: 根据治组id获取训练项目
         * @param{string} treatmentGroupId 治疗组id
         */
        function getTrainingItem(treatmentGroupId) {
            var filterGroup = filterCurrentTreatmentGroup(treatmentGroupId);
            if (!filterGroup) return;
            comboServices.getSubItemService(2, filterGroup.prcp_item_type.id).then(function (res) {
                var data = res.data,
                    $treatmentItemWrap = $('#treatment-item-wrap'),
                    $fragment = $(document.createDocumentFragment());

                $.each(data, function (index, item) {
                    var $checkboxWrap = $('<div class="ares-col-6" title="' + item + '">'
                        + '<input type="checkbox" name="treatmentItem-' + item.id + '" title="' + item.itemName + '" value="' + item.itemName + '" lay-skin="primary">'
                        + '</div>');
                    if (editAble && $.isPlainObject(cacheData) && cacheData['treatmentItem-' + item.id] == item.itemName) {
                        $checkboxWrap.find('input').prop('checked', true);
                    }
                    $fragment.append($checkboxWrap);
                })
                var $other = $('<div class="ares-col-sm-6">'
                    + '<label >其它 </label>'
                    + '<input name="treatmentItem-other" class="layui-input ares-d-inline-block ares-w-auto">'
                    + '</div>');
                if (editAble && $.isPlainObject(cacheData) && cacheData['treatmentItem-other']) {
                    $other.find('input').val(cacheData['treatmentItem-other']);
                }
                $fragment.append($other);
                $treatmentItemWrap.empty().append($fragment);
                form.render();
            })
        }

        /**
         * @author: ares
         * @date: 2021/3/10 16:53
         * @description: 是否已经选择了训练项目
         */
        function isSelectedTrainingItem(formFields) {
            var selected = false;
            for (key in formFields) {
                if (key.indexOf('treatmentItem') == 0 && formFields[key]) {
                    selected = true;
                    break;
                }
            }
            return selected;
        }

        /**
         * @author: ares
         * @date: 2021/3/10 12:15
         * @description: 初始化
         */
        function init() {
            getTreatmentGroup();
        }
    })
</script>
</body>

</html>
